<template>
    <div class="upload">
        <el-upload v-model:file-list="fileList" ref="uploadRef" :action="action" :multiple="multiple" :limit="limit"
            :show-file-list="false" :headers="headers" :data="data" :on-progress="handleProgress"
            :on-success="handleSuccess" :on-exceed="handleExceed" :on-error="handleError" :accept="getAccept">
            <slot />
        </el-upload>
        <el-dialog v-if="showProgress && fileList.length" v-model="visible" title="上传进度" :close-on-click-modal="false"
            width="500px" :modal="false" @close="handleClose">
            <div class="file-list p-4">
                <template v-for="(item, index) in fileList">
                    <div class="mb-5" :key="index">
                        <div>{{ item.name }}</div>
                        <div class="flex-1">
                            <el-progress :percentage="parseInt(item.percentage)" />
                        </div>
                    </div>
                </template>
            </div>
        </el-dialog>
    </div>
</template>

<script>
let uploadLen = 0;
export default {
    name: 'upload',
    props: {
        // 上传文件类型
        type: {
            type: String,
            default: 'image'
        },
        // 是否支持多选
        multiple: {
            type: Boolean,
            default: true
        },
        // 多选时最多选择几条
        limit: {
            type: Number,
            default: 10
        },
        // 上传时的额外参数
        data: {
            type: Object,
            default: () => ({})
        },
        // 是否显示上传进度
        showProgress: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            visible: false,
            fileList: [],
            action: '你的上传API',
            headers: {
                'token': this.$store.getters.token,
            },
        }
    },
    computed: {
        getAccept () {
            switch (this.type) {
                case 'image':
                    return '.jpg,.png,.gif,.jpeg,.ico'
                case 'video':
                    return '.wmv,.avi,.mpg,.mpeg,.3gp,.mov,.mp4,.flv,.rmvb,.mkv'
                default:
                    return '*'
            }
        }
    },
    methods: {
        handleProgress(){
            this.visible = true
        },
        handleSuccess (response, file) {
            uploadLen++
            if (uploadLen == fileList.value.length) {
                uploadLen = 0
                this.fileList = [];
                this.$emit('allSuccess')
            }
            emit('change', file)
            if (response.code == RequestCodeEnum.SUCCESS) {
                this.$emit('success', response)
            }
            if (response.code == RequestCodeEnum.FAIL && response.msg) {
                this.$message.error(response.msg)
            }
        },
        handleError (event, file){
            uploadLen++
            if (uploadLen == this.fileList.length) {
                uploadLen = 0
                this.fileList = [];
                this.$emit('allSuccess')
            }
            this.$message.error(`${file.name}文件上传失败`)
            this.$refs.uploadRef.abort(file)
            this.visible = false
            this.$emit('change', file)
            this.$emit('error', file)
        },
        handleExceed () {
            this.$message.error(`超出上传上限${this.limit}，请重新上传`)
        },
        handleClose () {
            this.fileList = [];
            this.visible = false;
        }
    },
}
</script>
<style scoped lang="less">
</style>